<template>
    <div id="audi">
        <audio controls :src="playUrl" style="margin-left:150px">
        </audio>
        <div class="audiEnd">
            <img :src="playImg+'?param=45y45'" alt="">
            <div class="msg" style="display:inline-block;margin-left:400px;position: absolute;top:0px">
                <span>歌曲名:{{playName}}</span>
                <span>歌手:{{playSingers}}</span>
            </div>
            
        </div>
        <!-- <Seachpage ></Seachpage> -->
    </div>
</template>
<script>
import { mapState } from 'vuex'
// import Seachpage from '@/components/Seach_page'
export default {
    name:'playMusic',
    computed: {
         ...mapState(['playUrl','playImg','playName','playSingers']),  
    },
    components:{
        // Seachpage
    }

}

</script>
<style>
    #audi{
     /*  */
     position: fixed;
     bottom:0px;
     width: 100%;
    }
    #audi .audiEnd{
     position: absolute;
     display:inline-block;
     background-color:#F1F3F4;
     height:54px;
     top: 0;
     left: 0;
     z-index: -1;
     width: 100%;
     line-height:54px
    }
    .audiEnd img{
        width: 45px;
        margin: 5px 0 0 80px;
        box-shadow: 10px -3px 10px  rgba(0, 0, 0, 0.4);
    }
    .audiEnd .msg span{
        margin-right: 10px;
    }
</style>